Azure Static Web Apps でパブリックプレビュー中の「Snippets」を試してみた

いわさ

2023.10.30

いわさです。

先日の Azure Static Web Apps のアップデートで Snippets という機能がパブリックプレビューで追加されていました。

この機能を使うと、どうやらソースコード側の変更は不要で、Static Web Apps の構成変更のみでレスポンス内容に出力を追加することが出来るようです。

タグマネージャー的な使い方を Static Web Apps がマネージドで提供出来る感じでしょうか。
どのあたりを変更出来るのか、今回試してみましたので紹介します。

設定方法

まず、今回の新しい機能公式ドキュメントは以下になります。

ただし、本日時点では、設定手順が記載されているだけで例などの記述が少なく、実際に動かしてみたほうがわかりやすいと思います。

適当な Static Web Apps を作成したら Configuration メニューの Sinippets タブからアクセスすることが出来ます。

設定可能な項目は以下です。
Location はスニペットを設定する箇所を、HEAD タグ内か、BODY タグ内かを選択出来ます。
さらに、それぞれの先頭か末尾か、どちらにタグを挿入するかを選択出来ます。

注意点としては既存のタグの間の指定などは出来ないという点と、挿入のみで既存タグの上書きや更新は出来ないという点です。
また、ドキュメントによるとフロントエンドのフレームワーク側でスニペットコードを上書きする場合もあるようなので、利用にあたっては動作確認を十分行ったほうが良さそうです。

嬉しいのが、次のようにスニペットコードの設定対象の環境を選択出来るという点です。
運用環境とステージングやテスト環境で、トラッキング用のタグなどを切り替えたいシーンはあると思いますが、そういうシーンで利用出来そうですね。

スニペット設定なしのデフォルト状態では次のようなレスポンスを生成するアプリケーションをホスティングしています。
また、今回使用している Static Web Apps のプランはフリープランです。

% curl https://victorious-moss-08ede0800.4.azurestaticapps.net
<html>
<head>
  <title>hogetitle</title>
</head>
<body>
hoge add direct main
2
</body>
</html>

Head に追加してみる

まずは Location に Head を指定して、次のようなコードを入力してみました。

% curl https://victorious-moss-08ede0800.4.azurestaticapps.net
<html>
<head>
  <title>hogetitle</title>
<!--Insert your HTML below-->
add-head</head>
<body>
hoge add direct main
2
</body>
</html>

リクエストを送信してみると、HEAD タグ内の末尾に設定したコードが挿入されていることがわかります。
なるほど。

Body にも追加してみる

この状態で Location に Body を指定した別のスニペットを追加してみます。
今度は先頭に追加してみましょう。

% curl https://victorious-moss-08ede0800.4.azurestaticapps.net
<html>
<head>
  <title>hogetitle</title>
<!--Insert your HTML below-->
add-head</head>
<body><!--Insert your HTML below-->
insert-body

hoge add direct main
2
</body>
</html>

BODY タグの先頭にスニペットコードが挿入されていることが確認出来ました。
タグ読み込みのタイミングもちょっとコントロール出来る感じで良いですね。